<template>
	<view>
		<view class="status-bar" :style="{'margin-top':statusBarHeight + 'px'}">
			<view class="back-btn iconfont icon-fanhui" @click="back"></view>
			<view class="more-btn iconfont icon-gengduo" @click="deleteFriend"></view>
		</view>
		<view class="top">
			<view class="login-top">
				<view class="avatar-img">
					<image :src="friend.avatarUrl" mode="widthFix"></image>
				</view>
				<view class="user-info-block">
					<view class="friend-remark">{{friend.friendName}}</view>
					<view class="nick-name">{{friend.nickName}}</view>
					<view class="uid">UID：{{friend.uid}}</view>
					<view class="sex-age">
						<view class="sex">性别：{{friend.sex | friendSex}}</view>
						<view class="age">年龄：18</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-container">
			<view class="content-item">
				<view class="item-icon iconfont icon-gerenzhongxin"></view>
				<view class="nick-name">{{friend.nickName}}</view>
				<view class="iconfont icon-anjianfengexian"></view>
				<view>{{friend.uid}}</view>
			</view>
			
			<view class="content-item">
				<view class="item-icon iconfont icon-xingbie"></view>
				<view class="nick-name">{{friend.sex | friendSex}}</view>
				<view class="iconfont icon-anjianfengexian"></view>
				<view class="item-icon iconfont icon-nianling"></view>
				<view class="nick-name">18岁</view>
				<view class="iconfont icon-anjianfengexian"></view>
				<view class="item-icon iconfont icon-zhiye"></view>
				<view class="nick-name">{{friend.uposition ? friend.uposition : '学生'}}</view>
				<view class="iconfont icon-anjianfengexian"></view>
				<view class="item-icon iconfont icon-zhuzhi_chengshi"></view>
				<view class="nick-name">{{friend.userAddress}}</view>
			</view>
			<view class="content-item" v-if="friend.schoolName">
				<view class="item-icon iconfont icon-gerenzhongxin"></view>
				<view class="nick-name">{{friend.schoolName}}</view>
			</view>
			<view class="content-item" v-if="friend.email">
				<view class="item-icon iconfont icon-youjian"></view>
				<view class="nick-name">{{friend.email}}</view>
			</view>
			<view class="content-item">
				<view class="item-icon iconfont icon-shengri" v-if="friend.birthday"></view>
				<view class="nick-name">{{friend.birthday}}</view>
				<view class="iconfont icon-anjianfengexian" v-if="friend.constellation"></view>
				<view class="item-icon iconfont icon-xingzuo" v-if="friend.constellation"></view>
				<view class="nick-name">{{friend.constellation}}</view>
			</view>
			<view class="content-item space-betwen" v-if="friend.motto">
				<view class="content-item-l">
					<view class="item-icon iconfont icon-gexingqianming"></view>
					<view class="nick-name">{{friend.motto}}</view>
				</view>
				<view class="content-item-r iconfont icon-gengduo1"></view>
			</view>
			<!-- <view class="content-item space-betwen">
				<view class="content-item-l">
					<view class="item-icon iconfont icon-dongtai"></view>
					<view class="nick-name">他的动态</view>
				</view>
				<view class="content-item-r iconfont icon-gengduo1"></view>
			</view>
			<view class="content-item imgs-block">
				<image src="../../static/avatarimg/avatar(1).jpg" mode="widthFix"></image>
				<image src="../../static/avatarimg/avatar(1).jpg" mode="widthFix"></image>
				<image src="../../static/avatarimg/avatar(1).jpg" mode="widthFix"></image>
				<image src="../../static/avatarimg/avatar(1).jpg" mode="widthFix"></image>
				<view class="img-more iconfont icon-gengduo1"></view>
			</view> -->
		</view>
		<view class="send-massage-btn" @click="toCahtRoom(friend.uid)">发送消息</view>
		<hFormAlert v-if="isShowHF"
		@confirm="confirmHF" @cancel="cancelHF"
		confirmColor="#FFEB3B"
		cancelColor="#ff3333"
		:textarea="isTextarea"
		:placeholder="placeholder"></hFormAlert>
	</view>
</template>

<script>
	import {Friend} from "../../model/friend.js"
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	export default {
		data() {
			return {
				statusBarHeight: 30,
				friend:{},
				isShowHF:false,
				placeholder:"请输入好友备注",
				isTextarea:false,
				friendName:""
			}
		},
		onLoad() {
			let res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', async (data)=> {
				console.log(data.friendUid)
				let funRes = await Friend.getFriendInfo({friendId:data.friendUid})
				console.log(funRes)
				this.friend = funRes.data
			})
		},
		filters:{
			friendSex(e){
				if(e == 1){
					return '男'
				}
				if(e == 2){
					return '女'
				}
				return '未知'
			}
		},
		components:{
			hFormAlert
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			deleteFriend(){
				uni.showActionSheet({
				   itemList: ["删除好友","修改备注","取消"],
				   itemColor:"#FF3333",
					success: (res) =>{
						switch (res.tapIndex){
							case 0:
							break;
							case 1:
							this.isShowHF = true
							break;
						}
					}
					
				});
			},
			confirmHF(e){
				this.isShowHF = false
				this.friendName = e.text;
				console.log(this.friend)
			},
			cancelHF(){
				this.isShowHF = false
			},
			toCahtRoom(uid){
				let _this = this
				uni.navigateTo({
					url:"../chatRoom/chatRoom",
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { friendUid: uid })
						let message = {
							uid:uid,
							toFriendId:_this.$store.user.uid,
							contentType:5,
						}
						_this.$store.socketTask.sockSend(message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		background-image: url('../../static/testImg/VCG21518d12b17.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 400rpx;
		position: relative;
		.login-top{
			display: flex;
			.avatar-img{
				margin: 0 20rpx;
				position: absolute;
				left: 40rpx;
				bottom: -100rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					border: 4rpx #FFFFFF solid;
				}
			}
			.user-info-block{
				margin: 30rpx 20rpx 10rpx 0;
				position: absolute;
				left: 280rpx;
				bottom: -90rpx;
				.friend-remark{
					font-size: 40rpx;
					color: #FFFFFF;
					text-shadow: 2rpx 2rpx 2rpx #000;
					font-weight: bolder;
					letter-spacing: 5rpx;
				}
				.nick-name{
					color: #FFFFFF;
					font-size: 25rpx;
					text-shadow: 2rpx 2rpx 2rpx #000;
				}
				.uid{
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #666666;
				}
				.sex-age{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
					.sex{
						margin-right: 40rpx;
					}
				}
			}
		}
	}
	.status-bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFF;
		position: fixed;
		z-index: 999;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: var(--status-bar-height);
		width: 100%;
		font-size: 30rpx;
	}
	.content-container{
		padding: 20rpx;
		margin-top: 100rpx;
		.content-item{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			color: #888888;
			font-size: 28rpx;
			.item-icon{
				margin: 0 20rpx 0 0;
				font-size: 36rpx;
			}
			.content-item-l{
				display: flex;
				align-items: center;
			}
		}
		.space-betwen{
			justify-content: space-between;
			margin-right: 20rpx;
		}
		.imgs-block{
			margin-left: 40rpx;
			image{
				margin: 10rpx;
				width: 130rpx;
				height: 130rpx;
			}
			.img-more{
				width: 60rpx;
				background-color: #F2F2F2;
				height: 130rpx;
				font-size: 50rpx;
				line-height: 130rpx;
				text-align: center;
				color: #bbb;
			}
		}
	}
	.send-massage-btn{
		width: 80vw;
		height: 80rpx;
		position: absolute;
		left: 50%;
		bottom: 100rpx;
		transform: translateX(-50%);
		background-color: $fun-theme-color;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
